<template>
  <div>
    <!--
      必传
        action 指向上传地址, 但是后面我们会用自定义在线云服务进行处理, 这里给个 # 即可
      显示相关
        fileList 文件列表数组, 内包对象, 对象中有 url 属性的话就会显示图片 (后续使用重点)
        list-type 指定显示样式, 输入 picture-cart
        class 动态类名, 控制是否显示上传图标 (配合 css 实现)
      图片处理钩子
        on-remove 传入删除图片时触发的函数, 默认可以得到删除的图片本身, 最新的fileList 列表值
        on-change 文件添加时的钩子, 也是用来处理 fileList 没有及时更新的问题
      上传相关
        before-upload 上传前校验, 如果返回 false 就停止上传
        http-request 可以自定义上传方法, 替换 action 的动作
     -->
    <el-upload
      action="#"

      :file-list="fileList"
      list-type="picture-card"
      :class="{disable: fileList.length >= 1}"

      :on-remove="onRemove"
      :on-change="onChange"

      :before-upload="boforeUpload"
      :http-request="upload"
    >
      <!-- 没有图片时显示的占位 -->
      <i class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
// const COS = require('cos-js-sdk-v5')
import COS from 'cos-js-sdk-v5'

// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
const cos = new COS({
  SecretId: 'AKIDSt9EHG7wc4dzsfJp9JKFyZ2KRNHH5h7V',
  SecretKey: 'OacUBlLqJftxpbP5g9Wq3976sQluqY2P'
})
export default {
  data() {
    return {
      // 文件列表数组, 里面的对象有 url 的都会显示
      fileList: [
        // { url: 'https://img2.woyaogexing.com/2019/10/15/ae7b42849b264b7d87ac622891932e6d!400x400.jpeg' }
      ]
    }
  },
  methods: {
    onRemove(file, newFileList) {
      // 每当图片被移除, 这个钩子触发
      // 得到文静本体 和 删除后最新的文件列表
      this.fileList = newFileList
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    boforeUpload(file) {
      // 这个函数会在上传之前触发
      // 如果返回false就会阻止上传
      // 需要我们自己判断 file.size file.type 是否符合条件
      console.log('上传前校验', file)
      // 判断类型
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('目前只支持jpeg/png图片')
        return false
      }
      // 判断大小
      if (file.size > 1024 * 1024) {
        this.$message.error('不能上传超过1M的图片')
        return false
      }
    },
    upload(params) {
      const file = params.file
      console.log('自定义上传函数', file)

      cos.putObject({
        Bucket: 'hr83-1315101259', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        // 用当前时间戳做文件名, 强制转成字符串
        Key: Date.now() + '', /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
      }, (err, data) => {
        console.log('异步上传完毕, 传入 err / data, 如果err错误不存在就证明上传成功')
        console.log(err || data)
        if (!err) {
          // 如果没有报错, 就得到了在线图片地址
          console.log('http://' + data.Location)
          // 所有的结果数据存放到 fileList 打通腾讯云和element ui数据
          this.fileList[0].status = 'success'
          this.fileList[0].url = 'http://' + data.Location
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.disable {
  ::v-deep .el-upload--picture-card {
    display: none;
  }
}
</style>
